<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")
  cvs.width = 400;
  cvs.height = 400;
  const c2d = cvs.getContext("2d");

  // 创建图片对象
  // const img = new Image();
  // img.src = "./img/3.jpg";
  // 等待图片对象加载完成
  // img.onload = function(){
    // 绘制到canvas
    // 参数：图片对象，绘制到的x位置，绘制到的x位置
    // c2d.drawImage(img, 50, 50);
    // 参数：图片对象，绘制到的x位置，绘制到的x位置，绘制后图片的宽高
    // c2d.drawImage(img, 50, 50, 100, 100);
  // }

  // ========
  
  // const img = new Image();
  // img.src = "./img/2.png";
  // img.onload = function(){
  //   c2d.drawImage(img, 32, 48, 64, 48, 200, 200, 64, 48);
  // }

  // ========

  const img = new Image();
  img.src = "./img/2.png";

  img.onload = function(){
    let i = 0;
    let speed = 10;
    let now = 0;
    c2d.drawImage(img, 32 * (i%4), 0, 32, 48, 168, 0, 32, 48);
    setInterval(()=>{
      c2d.clearRect(0, 0, cvs.width, cvs.height);
      c2d.beginPath();
      i++;

      // 要绘制的图片的位置
      let ix = 32 * (i%4);
      let iy = 0;
      // 绘制到canvas的位置
      let cx = 168;
      let cy = now+=speed;

      c2d.drawImage(img, ix, iy, 32, 48, cx, cy, 32, 48);
    }, 300)
  }





  
</script>
</html>